<template>
  <div class="user-profile">
    <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
    class="page-nav-bar"
    title="个人信息"
    left-arrow @click-left="$router.back()" />
    <input 
    type="file"
    hidden
    ref="file"
    @change='onFileChange'
    />
    <!-- /导航栏 -->
    <!-- 

      点击头像弹出文件选择
      点击文件确定弹出弹出层
      回显到弹出层上
     -->
    <van-cell 
    title="头像" 
    is-link
    class="photo-cell"
    center
    @click="$refs.file.click()"
    >
      <van-image
        class="avatar"
        fit="cover"
        round
        :src="user.photo"
      />
    </van-cell>
    <van-cell 
    title="昵称" 
    :value="user.name" 
    is-link 
    @click="isUpdateNameShow = true" 
    />
    <van-cell 
    title="性别" 
    :value="user.gender === 0 ? '男' : '女' " 
    is-link 
    @click="isUpdateGenderShow = true" 
    />
    <van-cell 
    title="生日" 
    :value="user.birthday" 
    is-link 
    @click="isUpdateBirthdayShow= true"
    />
  </div>
  <!-- 昵称弹出层 -->
  <van-popup
    v-model="isUpdateNameShow"
    style="height: 100%;"
    position="bottom">
     <update-name 
     @close="isUpdateNameShow = false"
     v-model="user.name"
     v-if="isUpdateNameShow"
     />
  </van-popup>
  <!-- 昵称弹出层 -->
  <!-- 性别弹出层 -->
    <van-popup
      v-model="isUpdateGenderShow"
      position="bottom"
    >
    <!-- 绑定gender数据 每回关闭让组件销毁  -->
      <update-gender 
      v-model="user.gender" 
      v-if="isUpdateGenderShow" 
      @close="isUpdateGenderShow = false" />
    </van-popup>
  <!-- 性别弹出层 -->
  <!-- 性别弹出层 -->
  <van-popup
  v-model="isUpdateBirthdayShow"
  position="bottom"
  >
  <update-birthday  
  v-model="user.birthday"
  @close="isUpdateBirthdayShow = false"
  v-if="isUpdateBirthdayShow" />
  />
  </van-popup>
  <!-- 性别弹出层 -->
  <!-- 编辑头像弹层 -->
    <van-popup
    v-model="isUpdatePhotoShow"
    style="height: 100%"
    position="bottom">
      <update-photo
      :img='img'
      @close="isUpdatePhotoShow = false" 
      @update-photo="user.photo=$event"
      v-if="isUpdatePhotoShow"
       />
    </van-popup>
    <!-- 编辑头像弹层 -->
  </div>
</template>

<script>
import {getUserProfile} from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday.vue'
import UpdatePhoto from './components/update-photo.vue'
export default {
  // 组件名称
  name: 'UserProfile',
  // 局部注册的组件
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      user:{},//用户信息
      isUpdateNameShow:false,//昵称弹出层状态
      isUpdateGenderShow:false,//性别弹出层
      isUpdateBirthdayShow:false,//生日弹出层状态
      isUpdatePhotoShow:false,//头像弹出层
      img:'',//图像
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created () {
    this.loadUserProfile()
   },
  mounted () { },
  // 组件方法
  methods: {
    async loadUserProfile(){
      try{
        const {data} = await getUserProfile()
        this.user=data.data
      }catch(err){[
        this.$toast('用户获取信息失败')
      ]}
    },
    // 监听文件改变事件
    onFileChange(){
      // 获取文件对象
      const file=this.$refs.file.files[0];
      // 基于文章对象 获取bold对象
      this.img=window.URL.createObjectURL(file);
      // console.log(data);
      // 弹出头像弹出层
      this.isUpdatePhotoShow=true
      // change事件触发的前提是改变当重复选着一个文件时不会改变 无法触发change事件 手动清楚
      this.$refs.file.value=''
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  .van-popup {
    background: #f5f7f9;
  }
  .photo-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
</style>
